<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}			
			.wrapper {
				margin: 0 auto;
				width: 1270px;
				height: 2260px;
				background-image: url(img/history_start.png);
				background-repeat: no-repeat;
				background-position: 420px 0;
			}
			
			.left,.right {
				float: left;
				width: 570px;
				height: 2260px;
			}
			/*中间盒子样式设置*/
			
			.mid {
				margin-top: 140px;
				float: left;
				width: 130px;
				height: 2050px;
				/*padding: 145px 0;*/
			}
			ul{
				list-style-type: none;
			}
			.left1{
				
			}
			h3{
				color: brown;
				margin-left: 470px;
				margin-top: -82px;
			}
			.nou1{
				margin-left: 200px;
				margin-top: 385px;
				height: 100px;
				width: 400px;
				background-repeat: no-repeat;
				background-position: 0 -1200px;
				background-image: url(img/sprites.png);
			}
			.nou2{
				margin-left: 200px;
				margin-top: 128px;
				height: 100px;
				width: 400px;
				background-repeat: no-repeat;
				background-position: 0 -1200px;
				background-image: url(img/sprites.png);
			}
			.nou3{
				margin-left: 200px;
				margin-top: 125px;
				height: 100px;
				width: 400px;
				background-repeat: no-repeat;
				background-position: 0 -1200px;
				background-image: url(img/sprites.png);
			}
			.nou4{
				margin-left: 200px;
				margin-top: 125px;
				height: 100px;
				width: 400px;
				background-repeat: no-repeat;
				background-position: 0 -1400px;
				background-image: url(img/sprites.png);
			}
			.nou5{
				margin-left: 200px;
				margin-top: 125px;
				height: 100px;
				width: 400px;
				background-repeat: no-repeat;
				background-position: 0 -1400px;
				background-image: url(img/sprites.png);
			}
			.nou6{
				margin-left: 200px;
				margin-top: 120px;
				height: 100px;
				width: 400px;
				background-repeat: no-repeat;
				background-position: 0 -1400px;
				background-image: url(img/sprites.png);
			}
			.nou7{
				margin-left: 200px;
				margin-top: 110px;
				height: 100px;
				width: 400px;
				background-repeat: no-repeat;
				background-position: 0 -1400px;
				background-image: url(img/sprites.png);
			}
			.nou8{
				margin-left: 200px;
				margin-top: 110px;
				height: 100px;
				width: 400px;
				background-repeat: no-repeat;
				background-position: 0 -1600px;
				background-image: url(img/sprites.png);
			}
			.nou9{
				margin-left: 200px;
				margin-top: 110px;
				height: 100px;
				width: 400px;
				background-repeat: no-repeat;
				background-position: 0 -1600px;
				background-image: url(img/sprites.png);
			}
			.nou10{
				margin-left: 200px;
				margin-top: 125px;
				height: 100px;
				width: 400px;
				background-repeat: no-repeat;
				background-position: 0 -1600px;
				background-image: url(img/sprites.png);
			}
			.wz{
				color: brown;
				margin-left: -11px;
				margin-top: -80px;
			}
			.now1{
				margin-left: 90px;
				margin-top: 300px;
				height: 100px;
				width: 400px;
				background-repeat: no-repeat;
				background-position: 0 -1300px;
				background-image: url(img/sprites.png);
			}
			.now2{
				margin-left: 90px;
				margin-top: 125px;
				height: 100px;
				width: 400px;
				background-repeat: no-repeat;
				background-position: 0 -1300px;
				background-image: url(img/sprites.png);
			}
			.now3{
				margin-left: 90px;
				margin-top: 125px;
				height: 100px;
				width: 400px;
				background-repeat: no-repeat;
				background-position: 0 -1300px;
				background-image: url(img/sprites.png);
			}
			.now4{
				margin-left: 90px;
				margin-top: 125px;
				height: 100px;
				width: 400px;
				background-repeat: no-repeat;
				background-position: 0 -1300px;
				background-image: url(img/sprites.png);
			}
			.now5{
				margin-left: 90px;
				margin-top: 125px;
				height: 100px;
				width: 400px;
				background-repeat: no-repeat;
				background-position: 0 -1500px;
				background-image: url(img/sprites.png);
			}
			.now6{
				margin-left: 90px;
				margin-top: 120px;
				height: 100px;
				width: 400px;
				background-repeat: no-repeat;
				background-position: 0 -1500px;
				background-image: url(img/sprites.png);
			}
			.now7{
				margin-left: 90px;
				margin-top: 100px;
				height: 100px;
				width: 400px;
				background-repeat: no-repeat;
				background-position: 0 -1500px;
				background-image: url(img/sprites.png);
			}
			.now8{
				margin-left: 90px;
				margin-top: 125px;
				height: 100px;
				width: 400px;
				background-repeat: no-repeat;
				background-position: 0 -1700px;
				background-image: url(img/sprites.png);
			}
			.now9{
				margin-left: 90px;
				margin-top: 100px;
				height: 100px;
				width: 400px;
				background-repeat: no-repeat;
				background-position: 0 -1700px;
				background-image: url(img/sprites.png);
			}
			.now10{
				margin-left: 90px;
				margin-top: 120px;
				height: 100px;
				width: 400px;
				background-repeat: no-repeat;
				background-position: 0 -1700px;
				background-image: url(img/sprites.png);
			}
			.tit-s:hover{
				text-shadow: 2px 2px 5px;
			}
			.tit-s {
	            margin-left: 5px;
	            width: 160px;
	            height: 56px;
	            line-height: 25px;
	            border-right: 3px solid white;
	            color: white;
	            font-size: 15px;
            }

			.tit-sa{
				width: 60px;
	            height: 56px;
	            margin-left: 180px;
	            margin-top: -50px;
	            text-align: center;
	            color: white;
			}
			.txt-s{
				padding-top: 3px;
	            margin-left: 40px;
	            width: 50px;
	            height: 56px;
	            color: white;
	            font-size: 15px;
	            text-align: center;
	            line-height: 22px;
	            border-right: 3px solid white;
			}
			.txt-sa{
				width: 170px;
				height: 56px;
				line-height: 25px;
				margin-left: 100px;
				margin-top: -56px;
				color: white;
			}
		</style>
	</head>

	<body>
		<div class="wrapper">
			<div class="left">
				<div class="box1">
					<ul>
						<li>
							<div class="left1">
								<div class="nou1">
									<div class="tit-s">制定了党的最高纲领和最低纲领</div>
									<div class="tit-sa">1922年7月</div>
								</div>
								<h3>中共二大</h3>
							</div>
						</li>
						<li>
							<div class="left1">
								<div class="nou2">
									<div class="tit-s">在中国近代史上第一次明确地提出了彻底的反帝反封建</div>
									<div class="tit-sa">1925年1月</div>
								</div>
							</div>
							<h3>中共四大</h3>						
						</li>
						<li>
							<div class="left1">
								<div class="nou3">
									<div class="tit-s">大会通过了关于政治，军事，组织，苏维埃政权</div>
									<div class="tit-sa">1928年6月</div>
								</div>
								<h3>中共六大</h3>
							</div>
						</li>
						<li>
							<div class="left1">
								<div class="nou4">
									<div class="tit-s">确定把党的工作重点转向社会主义建设</div>
									<div class="tit-sa">1956年9月</div>
								</div>
								<h3>中共八大</h3>
							</div>
						</li>
						<li>
							<div class="left1">
								<div class="nou5">
									<div class="tit-s">大会通过了政治报告，关于修改党章的报告</div>
									<div class="tit-sa">1973年8月</div>
								</div>
								<h3>中共十大</h3>
							</div>
						</li>
						<li>
							<div class="left1">
								<div class="nou6">
									<div class="tit-s">邓小平第一次提出了“建设有中国特色的社会主义”</div>
									<div class="tit-sa">1982年9月</div>
								</div>
								<h3>中共十二大</h3>
							</div>
						</li>
						<li>
							<div class="left1">
								<div class="nou7">
									<div class="tit-s">进一步解放思想，把握有利时机</div>
									<div class="tit-sa">1992年10月</div>
								</div>
								<h3>中共十四大</h3>
							</div>
						</li>
						<li>
							<div class="left1">
								<div class="nou8">
									<div class="tit-s">全面建设小康社会，加快推进社会主义现代化</div>
									<div class="tit-sa">2002年11月</div>
								</div>
								<h3>中共十六大</h3>
							</div>
						</li>
						<li>
							<div class="left1">
								<div class="nou9">
									<div class="tit-s">明确了科学发展观是党必须长期坚持的指导思想</div>
									<div class="tit-sa">2012年11月</div>
								</div>
								<h3>中共十八大</h3>
							</div>
						</li>
						<li>
							<div class="left1">
								<div class="nou10">
									<div class="tit-s">即将开幕</div>
									<div class="tit-sa">2022年10月</div>
								</div>
								<h3>中共二十大</h3>
							</div>
						</li>
					</ul>
				</div>
			</div>
			<div class="mid">
				<img src="img/history.png" alt="" />
			</div>
			<div class="right">
				<div class="box2">
					<ul>
						<li>
							<div class="right1">
								<div class="now1">
									<div class="txt-s">1921年7月</div>
									<div class="txt-sa">第一次全国代表大会宣告了中国共产党的正式成立</div>
								</div>
								<h3 class="wz">中共一大</h3>
							</div>
						</li>
						<li>
							<div class="right1">
								<div class="now2">
									<div class="txt-s">1923年6月</div>
									<div class="txt-sa">建立革命统一战线</div>
								</div>
								<h3 class="wz">中共三大</h3>
							</div>
						</li>
						<li>
							<div class="right1">
								<div class="now3">
									<div class="txt-s">1927年4月</div>
									<div class="txt-sa">大会通过了《政治形势与党的任务议决案》</div>
								</div>
							</div>
							<h3 class="wz">中共五大</h3>
						</li>
						<li>
							<div class="right1">
								<div class="now4">
									<div class="txt-s">1945年4月</div>
									<div class="txt-sa">通过新的党章，确定以马克思列宁主义与中国革命实践</div>
								</div>
							</div>
							<h3 class="wz">中共七大</h3>
						</li>
						<li>
							<div class="right1">
								<div class="now5">
									<div class="txt-s">1969年4月</div>
									<div class="txt-sa">大会通过了政治报告和党章修正草案</div>
								</div>
								<h3 class="wz">中共九大</h3>
							</div>
						</li>
						<li>
							<div class="right1">
								<div class="now6">
									<div class="txt-s">1977年8月</div>
									<div class="txt-sa">在揭批江青集团进一步深入，各方面工作得以恢复</div>
								</div>
								<h3 class="wz">中共十一大</h3>
							</div>
						</li>
						<li>
							<div class="right1">
								<div class="now7">
									<div class="txt-s">1987年10月</div>
									<div class="txt-sa">系统阐述了关于社会主义初级阶段的理论，提出了党在</div>
								</div>
								<h3 class="wz">中共十三大</h3>
							</div>
						</li>
						<li>
							<div class="right1">
								<div class="now8">
									<div class="txt-s">1997年9月</div>
									<div class="txt-sa">高举邓小平理论伟大旗帜，把建设有中国特色社会主义</div>
								</div>
								<h3 class="wz">中共十五大</h3>
							</div>
						</li>
						<li>
							<div class="right1">
								<div class="now9">
									<div class="txt-s">2007年10月</div>
									<div class="txt-sa">深入贯彻落实科学发展观，继续解放思想，坚持改革</div>
								</div>
								<h3 class="wz">中共十七大</h3>
							</div>
						</li>
						<li>
							<div class="right1">
								<div class="now10">
									<div class="txt-s">2017年10月</div>
									<div class="txt-sa">不忘初心牢记使命，高举中国特色社会主义伟大旗帜</div>
								</div>
								<h3 class="wz">中共十九大</h3>
							</div>
						</li>
					</ul>
				</div>	
			</div>
		</div>
	</body>

</html>